<template>
  <div ref="list" @scroll="onScroll" class="acticle-list">
    <!--
        load事件绑定的onLoad方法是一个专门用来加载数据的方法
            页面一打开自动调用
            当内容没有铺满1屏，还会自动调用，直到铺满1屏

            如果finished为true，onLoad不会被调用
            如果loading是true，onLoad也不会被调用

        finished：
            用来标识是否完全加载完
            为true代表全部加载完了
            默认值应该给false

        v-model绑定的loading
            是用来标记当前是否显示加载中....
            但是当onLoad被调用，会自动把它改成true
            默认值应该是false
            因为onLoad会自动改为true，所以记得本次数据加载完了，记得手动把这个改成false
     -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id" :to="`/article/${item.art_id}`">
        <div class="title">{{ item.title }}</div>
        <!-- 图片-宫格 -->
        <van-grid :border="false" :column-num="item.cover.type">
          <van-grid-item v-for="(pic,index) in item.cover.images" :key="index">
            <van-image :src="pic" />
          </van-grid-item>

        </van-grid>
        <!-- 底部信息 -->
        <div class="info-box">
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ item.pubdate | formatTime }}</span>
          <van-icon style="float:right;" name="cross" />
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
import { newsListAPI } from '@/api/news'
export default {
  props: {
    channel_id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  // 显示时调用 -- 只有缓存了才有这个钩子
  activated () {
    this.$refs.list.scrollTop = this.scrollTop
  },
  methods: {
    onScroll () {
      this.scrollTop = this.$refs.list.scrollTop
    },
    async onRefresh () {
      // 无条件把finished改为false
      this.finished = false
      // 下拉要刷新，代码要写到
      // 如果刷新完了，记得要把isLoading改为false
      const res = await newsListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      // 因为刷新本来就是覆盖
      this.list = res.data.results
      // 保存pre_timestamp（也就是上一个时间段的时间戳，方便上拉加载更多能加载上一段）
      this.timestamp = res.data.pre_timestamp
      // 把加载状态结束
      this.isLoading = false
    },
    async onLoad () {
      // 发请求获取数据
      const res = await newsListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })

      // 赋值是会覆盖的，就导致了，哪怕onLoad都请求了n多次数据
      // 但是一直永远只有10条，因为这里是赋值，会导致覆盖
      // this.list = res.data.results
      this.list.push(...res.data.results)

      // 把加载状态关闭
      this.loading = false

      // 保存上一个时间段的时间戳，方便下次来发请求
      this.timestamp = res.data.pre_timestamp

      if (this.timestamp === null) {
        // 刷完了标记为全部加载完成
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.acticle-list {
  position: fixed;
  width: 100vw;
  top: 90px;
  bottom: 50px;
  overflow: auto;

  .info-box {
    span {
      color: gray;
      font-size:12px;
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
}
</style>
